.loading-content {
    width: 50px;
    height: 50px;
    background-color: transparent;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;

    .loading-column {
        display: flex;
        justify-content: center;
        align-items: center;
    
        .loading-container {
            width: 30px;
            height: 30px;
            position: relative;
        }
    }
} 

.loading-container.animation-1 {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.loading-container.animation-2, .loading-container.animation-4 {
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
}

.loading-container.animation-2 .shape, .loading-container.animation-4 .shape {
	border-radius: 5px;
}

.loading-container.animation-2, .loading-container.animation-3, .loading-container.animation-4 {
	-webkit-animation: rotation 1s infinite;
	animation: rotation 1s infinite;
}

.loading-container.animation-3 .shape1 {
	border-top-left-radius: 10px;
}

.loading-container.animation-3 .shape2 {
	border-top-right-radius: 10px;
}

.loading-container.animation-3 .shape3 {
	border-bottom-left-radius: 10px;
}

.loading-container.animation-3 .shape4 {
	border-bottom-right-radius: 10px;
}

.loading-container.animation-4, .loading-container.animation-5 {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.loading-container.animation-5 .shape {
	width: 15px;
	height: 15px;
}

.loading-container.animation-6 {
	-webkit-animation: rotation 1s infinite;
	animation: rotation 1s infinite;
}

.loading-container.animation-6 .shape {
	width: 12px;
	height: 12px;
	border-radius: 2px;
}

.loading-container .shape {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 1px;
}

.loading-container .shape.shape1 {
	left: 0;
	background-color: #5C6BC0;
}

.loading-container .shape.shape2 {
	right: 0;
	background-color: #8BC34A;
}

.loading-container .shape.shape3 {
	bottom: 0;
	background-color: #FFB74D;
}

.loading-container .shape.shape4 {
	bottom: 0;
	right: 0;
	background-color: #F44336;
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotation {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

.animation-1 .shape1 {
	-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
	animation: animation1shape1 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation1shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(16px, 16px);
		transform: translate(16px, 16px);
	}
}

@keyframes animation1shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(16px, 16px);
		transform: translate(16px, 16px);
	}
}

.animation-1 .shape2 {
	-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
	animation: animation1shape2 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation1shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-16px, 16px);
		transform: translate(-16px, 16px);
	}
}

@keyframes animation1shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-16px, 16px);
		transform: translate(-16px, 16px);
	}
}

.animation-1 .shape3 {
	-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
	animation: animation1shape3 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation1shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(16px, -16px);
		transform: translate(16px, -16px);
	}
}

@keyframes animation1shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(16px, -16px);
		transform: translate(16px, -16px);
	}
}

.animation-1 .shape4 {
	-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
	animation: animation1shape4 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation1shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-16px, -16px);
		transform: translate(-16px, -16px);
	}
}

@keyframes animation1shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-16px, -16px);
		transform: translate(-16px, -16px);
	}
}

.animation-2 .shape1 {
	-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
	animation: animation2shape1 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation2shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(20px, 20px);
		transform: translate(20px, 20px);
	}
}

@keyframes animation2shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(20px, 20px);
		transform: translate(20px, 20px);
	}
}

.animation-2 .shape2 {
	-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
	animation: animation2shape2 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation2shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-20px, 20px);
		transform: translate(-20px, 20px);
	}
}

@keyframes animation2shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-20px, 20px);
		transform: translate(-20px, 20px);
	}
}

.animation-2 .shape3 {
	-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
	animation: animation2shape3 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation2shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(20px, -20px);
		transform: translate(20px, -20px);
	}
}

@keyframes animation2shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(20px, -20px);
		transform: translate(20px, -20px);
	}
}

.animation-2 .shape4 {
	-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
	animation: animation2shape4 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation2shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-20px, -20px);
		transform: translate(-20px, -20px);
	}
}

@keyframes animation2shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-20px, -20px);
		transform: translate(-20px, -20px);
	}
}

.animation-3 .shape1 {
	-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
	animation: animation3shape1 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation3shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, 5px);
		transform: translate(5px, 5px);
	}
}

@keyframes animation3shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, 5px);
		transform: translate(5px, 5px);
	}
}

.animation-3 .shape2 {
	-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
	animation: animation3shape2 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation3shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, 5px);
		transform: translate(-5px, 5px);
	}
}

@keyframes animation3shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, 5px);
		transform: translate(-5px, 5px);
	}
}

.animation-3 .shape3 {
	-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
	animation: animation3shape3 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation3shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, -5px);
		transform: translate(5px, -5px);
	}
}

@keyframes animation3shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, -5px);
		transform: translate(5px, -5px);
	}
}

.animation-3 .shape4 {
	-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
	animation: animation3shape4 0.5s ease 0s infinite alternate;
}

@-webkit-keyframes animation3shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, -5px);
		transform: translate(-5px, -5px);
	}
}

@keyframes animation3shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, -5px);
		transform: translate(-5px, -5px);
	}
}

.animation-4 .shape1 {
	-webkit-animation: animation4shape1 0.3s ease 0s infinite alternate;
	animation: animation4shape1 0.3s ease 0s infinite alternate;
}

@-webkit-keyframes animation4shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, 5px);
		transform: translate(5px, 5px);
	}
}

@keyframes animation4shape1 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, 5px);
		transform: translate(5px, 5px);
	}
}

.animation-4 .shape2 {
	-webkit-animation: animation4shape2 0.3s ease 0.3s infinite alternate;
	animation: animation4shape2 0.3s ease 0.3s infinite alternate;
}

@-webkit-keyframes animation4shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, 5px);
		transform: translate(-5px, 5px);
	}
}

@keyframes animation4shape2 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, 5px);
		transform: translate(-5px, 5px);
	}
}

.animation-4 .shape3 {
	-webkit-animation: animation4shape3 0.3s ease 0.3s infinite alternate;
	animation: animation4shape3 0.3s ease 0.3s infinite alternate;
}

@-webkit-keyframes animation4shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, -5px);
		transform: translate(5px, -5px);
	}
}

@keyframes animation4shape3 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(5px, -5px);
		transform: translate(5px, -5px);
	}
}

.animation-4 .shape4 {
	-webkit-animation: animation4shape4 0.3s ease 0s infinite alternate;
	animation: animation4shape4 0.3s ease 0s infinite alternate;
}

@-webkit-keyframes animation4shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, -5px);
		transform: translate(-5px, -5px);
	}
}

@keyframes animation4shape4 {
	from {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	to {
		-webkit-transform: translate(-5px, -5px);
		transform: translate(-5px, -5px);
	}
}

.animation-5 .shape1 {
	animation: animation5shape1 2s ease 0s infinite reverse;
}

@-webkit-keyframes animation5shape1 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, 15px);
		transform: translate(0, 15px);
	}

	50% {
		-webkit-transform: translate(15px, 15px);
		transform: translate(15px, 15px);
	}

	75% {
		-webkit-transform: translate(15px, 0);
		transform: translate(15px, 0);
	}
}

@keyframes animation5shape1 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, 15px);
		transform: translate(0, 15px);
	}

	50% {
		-webkit-transform: translate(15px, 15px);
		transform: translate(15px, 15px);
	}

	75% {
		-webkit-transform: translate(15px, 0);
		transform: translate(15px, 0);
	}
}

.animation-5 .shape2 {
	animation: animation5shape2 2s ease 0s infinite reverse;
}

@-webkit-keyframes animation5shape2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(-15px, 0);
		transform: translate(-15px, 0);
	}

	50% {
		-webkit-transform: translate(-15px, 15px);
		transform: translate(-15px, 15px);
	}

	75% {
		-webkit-transform: translate(0, 15px);
		transform: translate(0, 15px);
	}
}

@keyframes animation5shape2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(-15px, 0);
		transform: translate(-15px, 0);
	}

	50% {
		-webkit-transform: translate(-15px, 15px);
		transform: translate(-15px, 15px);
	}

	75% {
		-webkit-transform: translate(0, 15px);
		transform: translate(0, 15px);
	}
}

.animation-5 .shape3 {
	animation: animation5shape3 2s ease 0s infinite reverse;
}

@-webkit-keyframes animation5shape3 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(15px, 0);
		transform: translate(15px, 0);
	}

	50% {
		-webkit-transform: translate(15px, -15px);
		transform: translate(15px, -15px);
	}

	75% {
		-webkit-transform: translate(0, -15px);
		transform: translate(0, -15px);
	}
}

@keyframes animation5shape3 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(15px, 0);
		transform: translate(15px, 0);
	}

	50% {
		-webkit-transform: translate(15px, -15px);
		transform: translate(15px, -15px);
	}

	75% {
		-webkit-transform: translate(0, -15px);
		transform: translate(0, -15px);
	}
}

.animation-5 .shape4 {
	animation: animation5shape4 2s ease 0s infinite reverse;
}

@-webkit-keyframes animation5shape4 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, -15px);
		transform: translate(0, -15px);
	}

	50% {
		-webkit-transform: translate(-15px, -15px);
		transform: translate(-15px, -15px);
	}

	75% {
		-webkit-transform: translate(-15px, 0);
		transform: translate(-15px, 0);
	}
}

@keyframes animation5shape4 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, -15px);
		transform: translate(0, -15px);
	}

	50% {
		-webkit-transform: translate(-15px, -15px);
		transform: translate(-15px, -15px);
	}

	75% {
		-webkit-transform: translate(-15px, 0);
		transform: translate(-15px, 0);
	}
}

.animation-6 .shape1 {
	-webkit-animation: animation6shape1 2s linear 0s infinite normal;
	animation: animation6shape1 2s linear 0s infinite normal;
}

@-webkit-keyframes animation6shape1 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, 18px);
		transform: translate(0, 18px);
	}

	50% {
		-webkit-transform: translate(18px, 18px);
		transform: translate(18px, 18px);
	}

	75% {
		-webkit-transform: translate(18px, 0);
		transform: translate(18px, 0);
	}
}

@keyframes animation6shape1 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, 18px);
		transform: translate(0, 18px);
	}

	50% {
		-webkit-transform: translate(18px, 18px);
		transform: translate(18px, 18px);
	}

	75% {
		-webkit-transform: translate(18px, 0);
		transform: translate(18px, 0);
	}
}

.animation-6 .shape2 {
	-webkit-animation: animation6shape2 2s linear 0s infinite normal;
	animation: animation6shape2 2s linear 0s infinite normal;
}

@-webkit-keyframes animation6shape2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(-18px, 0);
		transform: translate(-18px, 0);
	}

	50% {
		-webkit-transform: translate(-18px, 18px);
		transform: translate(-18px, 18px);
	}

	75% {
		-webkit-transform: translate(0, 18px);
		transform: translate(0, 18px);
	}
}

@keyframes animation6shape2 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(-18px, 0);
		transform: translate(-18px, 0);
	}

	50% {
		-webkit-transform: translate(-18px, 18px);
		transform: translate(-18px, 18px);
	}

	75% {
		-webkit-transform: translate(0, 18px);
		transform: translate(0, 18px);
	}
}

.animation-6 .shape3 {
	-webkit-animation: animation6shape3 2s linear 0s infinite normal;
	animation: animation6shape3 2s linear 0s infinite normal;
}

@-webkit-keyframes animation6shape3 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(18px, 0);
		transform: translate(18px, 0);
	}

	50% {
		-webkit-transform: translate(18px, -18px);
		transform: translate(18px, -18px);
	}

	75% {
		-webkit-transform: translate(0, -18px);
		transform: translate(0, -18px);
	}
}

@keyframes animation6shape3 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(18px, 0);
		transform: translate(18px, 0);
	}

	50% {
		-webkit-transform: translate(18px, -18px);
		transform: translate(18px, -18px);
	}

	75% {
		-webkit-transform: translate(0, -18px);
		transform: translate(0, -18px);
	}
}

.animation-6 .shape4 {
	-webkit-animation: animation6shape4 2s linear 0s infinite normal;
	animation: animation6shape4 2s linear 0s infinite normal;
}

@-webkit-keyframes animation6shape4 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, -18px);
		transform: translate(0, -18px);
	}

	50% {
		-webkit-transform: translate(-18px, -18px);
		transform: translate(-18px, -18px);
	}

	75% {
		-webkit-transform: translate(-18px, 0);
		transform: translate(-18px, 0);
	}
}

@keyframes animation6shape4 {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}

	25% {
		-webkit-transform: translate(0, -18px);
		transform: translate(0, -18px);
	}

	50% {
		-webkit-transform: translate(-18px, -18px);
		transform: translate(-18px, -18px);
	}

	75% {
		-webkit-transform: translate(-18px, 0);
		transform: translate(-18px, 0);
	}
}